<template>
	<view class="bg">
		<view class="form">
			<view class="label">手机号：</view>
			<view class="value" :style="{'border-bottom':phoneInput?'1px solid #408CFF':'1px solid #e6e6e6'}" >
				<input class="uni-input" name="phone" placeholder="请输入手机号" :value="phone" @input="getInputPhone"  type="number" maxLength="11" @focus="changeBorder('phoneInput')"/>
			</view>	
			<view class="label">新密码：</view>
			<view class="value" :style="{'border-bottom':passwordInput?'1px solid #408CFF':'1px solid #e6e6e6'}">
				<input class="uni-input" name="password" :password="flag1" placeholder="请输入8-16位新密码" :value="password" @input="getInputPwd" maxlength="16" @focus="changeBorder('passwordInput')"/>
				<view class="form-line-icon" v-show="flag1"><i class="iconfont" style="font-size: 18px;color: #999;" @click="changePwdType(1)">&#xe6cf;</i></view>
				<view class="form-line-icon" v-show="!flag1"><i class="iconfont" style="font-size: 18px;color: #999;" @click="changePwdType(1)">&#xe6db;</i></view>
			</view>
			<view class="label">确认密码：</view>
			<view class="value" :style="{'border-bottom':comPwdInput?'1px solid #408CFF':'1px solid #e6e6e6'}">
				<input class="uni-input" name="com_pwd" :password='flag2' placeholder="请确认密码" :value="com_pwd" @input="getInputComPwd" maxlength="16" @focus="changeBorder('comPwdInput')"/>
				<view class="form-line-icon" v-show="flag2"><i class="iconfont" style="font-size: 18px;color: #999;" @click="changePwdType(2)">&#xe6cf;</i></view>
				<view class="form-line-icon" v-show="!flag2"><i class="iconfont" style="font-size: 18px;color: #999;" @click="changePwdType(2)">&#xe6db;</i></view>
			</view>
			<view class="label">短信验证码：</view>
			<view class="code" :style="{'border-bottom':codeMsgInput?'1px solid #408CFF':'1px solid #e6e6e6'}">
				<input class="uni-input input-code" name="code_msg" placeholder="请输入短信验证码" :value="code_msg" @input="getInputCodeMsg" maxlength="6" @focus="changeBorder('codeMsgInput')"/>
				<view class="btn-code" @click="getMsgCode" v-if="!disabled">获取验证码</view>
				<view class="btn-code-disable" v-if="disabled">{{ss}}秒后重新获取</view>
			</view>
			<view class="label">图片验证码：</view>
			<view class="valid" :style="{'border-bottom':codeImgInput?'1px solid #408CFF':'1px solid #e6e6e6'}">
				<input class="uni-input input-code" name="code_img" placeholder="请输入图片验证码" :value="code_img" @input="getInputCodeImg" maxlength="6" @focus="changeBorder('codeImgInput')"/>
				<view class="img-code">
					<image :src="url" @click="getCode" mode="aspectFit" style="max-width: 100%;max-height: 100%;"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<button class="btn" :loading="loading" @click="onSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	import { decryptDes } from '@/utils/utils';
	export default {
		data() {
			return {
				phone: '',
				tel: '',
				code_img: '',
				code_msg: '',
				password: '',
				com_pwd: '',
				url: '',
				encryptedString: '',//获取的图片验证码
				phoneInput: false,
				passwordInput: false,
				comPwdInput: false,
				codeMsgInput: false,
				codeImgInput: false,
				uid_msg: '',//获取的短信验证码
				disabled: false,
				ss: 60,
				flag1: true,
				flag2: true,
				timeout: '',
				loading: false,
				flag1: false,
				flag2: false,
			}
		},
		onLoad(options){
			this.phone = options.tel;
		},
		onShow() {
			//this.getCode();
		},
		methods:{
			async onSubmit(){
				let flag = this.validateForm();
				if(flag){
					try{
						let res = await this.$req.userData('customer/forgetPassword/imgcheck/white',{
							loginName: this.phone,
							password: this.password,
							messageUid: this.uid_msg,
							msgCode: this.code_msg,
							uid: this.encryptedString,
							imgCode: this.code_img,
						})
						if(res.data){
							uni.showToast({
								title:'密码重置成功',
								icon: 'success',
								duration: 5000
							})
							setTimeout(function(){
								uni.navigateTo({
									url: '../login/login'
								})
							},1000)
							
						}
					}
					catch(e){
						this.uid_msg = '';
						this.encryptedString = '';
						this.ss = 60;
						this.disabled = false;
						this.code_img = '';
						this.code_msg = '';
						this.timeout = '';
						this.getCode();
						this.getMsgCode();
					}
					
				}
			},
			changeBorder(val){
				let arr = ['phoneInput', 'passwordInput', 'comPwdInput', 'codeMsgInput', 'codeImgInput'];
				for(let item of arr){
					this[item] = item==val?true:false;
				}
			},
			// 获取图片验证码
			getCode(){
				this.$req.sendCheck('/code/send/pictureCode/uid').then(v=>{
					if (v._result) {
						this.encryptedString = v.data
						this.url = '/api/oceanside-send-and-check/code/send/pictureCode/' + this.encryptedString
				    }
				})
			},
			//获取短信验证码
			async getMsgCode(){
				if(!this.phone){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				let reg_phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(!reg_phone.test(this.phone)){
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				//获取加密串
				let pk = await this.$req.sendCheck('/msg/pageKey.dnl', {
					messageFlag: 'XIAOXIANG'
				})
				let messageKey = decryptDes(pk.data, 'shendawl', ['s', 'h', 'e', 'n', 'd', 'a', 'w', 'l'])
				
				this.disabled = true;
				this.ss = 60;
				this.timeout = setInterval(v => {
					this.ss--;
					if (this.ss == 0) {
						this.disabled = false;
						window.clearInterval(this.timeout)
					}
				}, 1000)
				
				let backmsg = await this.$req.sendCheck('/msg/send/identifyCode', {
					uid: messageKey,
					phone: this.phone,
					messageFlag: 'XIAOXIANG',
					remark:"注册获取验证码"
				})
				this.uid_msg = backmsg.data
			},
			getInputPhone(e){
				this.phone = e.detail.value;
				this.uid_msg = '';
				this.code_msg = '';
				window.clearInterval(this.timeout);
				this.disabled = false;
				this.ss = 60;
			},
			getInputPwd(e){
				this.password = e.detail.value;
			},
			getInputComPwd(e){
				this.com_pwd = e.detail.value;
			},
			getInputCodeMsg(e){
				this.code_msg = e.detail.value
			},
			getInputCodeImg(e){
				this.code_img = e.detail.value
			},
			//登录或注册前表单校验方法
			validateForm(){
				if(!this.phone){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				let reg_phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(!reg_phone.test(this.phone)){
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if(!this.password){
					uni.showToast({
						title: '请输入登录密码',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				let reg_pwd = /^[a-zA-Z0-9]{8,16}$/;
				if(!reg_pwd.test(this.password)){
					uni.showToast({
						title: '密码格式错误，正确格式包含数字和大小写字母，长度为8-16位',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if(!this.com_pwd){
					uni.showToast({
						title: '请输入您的确认登录密码',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if(this.password != this.com_pwd){
					uni.showToast({
						title: '您输入的登录密码与确认密码不一致',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if(!this.code_msg){
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if(this.code_msg.length!=6){
					uni.showToast({
						title: '您输入的短信验证码错误',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}			
				if(!this.code_img){
					uni.showToast({
						title: '请输入图片验证码',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if(this.code_img.length!=4){
					uni.showToast({
						title: '您输入的图片验证码错误',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				return true;
			},
			changePwdType(n){
				this['flag'+n] = !this['flag'+n];
			},
		}
	}
</script>

<style>
.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: linear-gradient(to top, #fdfbfb 0%, white 100%);
	}
	.form{
		width: 90%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		padding: 5% ;
	}
	.label{
		width: 100%;
		height: 80upx;
		position: relative;
		line-height: 80upx;
		font-size: 28upx;
		color: #333333;
		margin-top: 10px;
	}
	.value{
		width: 100%;
		height: 80upx;
		position: relative;
		border-bottom: 1px solid #e6e6e6;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.code{
		width: 100%;
		height: 80upx;
		position: relative;
		border-bottom: 1px solid #e6e6e6;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.input-code{
		width: 60%;
		display: inline-flex;
		
	}
	.btn-code{
		width: auto;
		height: 60upx;
		position: relative;
		padding: 0 24upx;
		background-image: linear-gradient(120deg, #A0C6FF 0%, #408CFF 100%);
		color: #ffffff;
		font-size: 28upx;
		border-radius: 4px;
		display: inline-flex;
		align-items: center;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: absolute;
		right: 0;
	}
	.uni-input {
	    height: 50upx;
	    padding: 7px 0;
	    line-height: 50upx;
	    font-size: 30upx;
	    background: #FFF;
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	}
	.checkbox{
		width: 100%;
		height: 40upx;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 24upx;
		color: #777777;
		padding: 10upx 0;
		margin-bottom: 20upx;
	}
	.bottom{
		position: relative;
		width: 90%;
		height: auto;
		top: 0;
		left: 0;
		padding: 20px 5%;
	}
	.btn{
		width: 100%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		font-size: 30upx;
		color: #FFFFFF;
		background-image: linear-gradient(to right, #79AEFF 0%, #798DFF 100%);
		letter-spacing: 5px;
		border-radius: 40upx;
	}
	.valid{
		width: 100%;
		height: 80upx;
		position: relative;
		border-bottom: 1px solid #e6e6e6;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.my-input{
		width: 100%;
		height: 90%;
		background-color: rgba(255,255,255,0);
		display: inline-flex;
		align-items: center;
		padding: 0 12px;
	}
	.uni-input-placeholder{
		color: #999;
		font-size: 28upx;
	}
	.form-line-icon{
		width: 40px;
		height: 24px;
		display: inline-flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 14px;
		color: #629FFE;
		text-indent: 10px;
		line-height: 24px;
	}
	.btn-code{
		width: auto;
		height: 30px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		color: #fff;
		/* background-color: #629FFE; */
		background-image: linear-gradient(to right, #79AEFF 0%, #798DFF 100%);
		margin-right: 5px;
		border-radius: 15px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 0 15px;
	}
	.btn-code-disable{
		width: auto;
		height: 30px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		color: #999;
		background-image: linear-gradient(to right, rgba(121, 174, 255,0.5) 0%, rgba(121, 141, 255,0.5) 100%);
		margin-right: 5px;
		border-radius: 15px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 0 15px;
	}
	.img-code{
		width: 80px;
		height: 30px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border-radius: 3px;
		margin-right: 10px;
	}
</style>
